<template>
  <transition name="">
    <div class="food-describe">
      <v-header
        title="美食概况"
        :fixed="true"
        :headerBg="headerBg"
        fontColor="#000">
      </v-header>
      <scroll style="overflow: hidden;" ref="scroll" :bounce="false" :probeType="3" :listenScroll="true"
        :data="storeFoodList"
        :scrollbar="false"
        :pullDownRefresh="false"
        :pullUpLoad="true"
        @pullingUp="onPullingUp">
        <div>
          <!-- 美食概况 -->
          <div class="food" :style="styles" v-if="storeFoodList.length !== 0 || this.contentHTML !== ''">
              <!-- <span>美食概况</span> -->
          </div>
          <div class="foodAll" v-html="contentHTML"></div>


          <!-- 门店列表 -->
          <div  style="paddingTop: 120px;" v-if="storeFoodList.length === 0 && this.contentHTML === '' || this.contentHTML === null" @click="getRefresh()">
            <not-data></not-data>
          </div>

          <!-- <div :style="styles"></div> -->

          <div class="contentWrapper" v-for="item in storeFoodList" :key="item.id">
            <flexbox>
              <flexbox-item :span='3/5'>
                <div class="flex-demo introduceWrapper">
                  <div class="introduceTitle" @click="handleStoreDescribe(item.contentId)"><strong>{{item.name}}</strong></div>
                  <div class="introduce" @click="handleStoreDescribe(item.contentId)">
                    <span>{{item.feature}}</span>
                  </div>
                  <div v-if="item.latitude !== '' || item.longitude !== ''" class="introducePosition" @click="goToMap(item.latitude, item.longitude, item.address)">
                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                    <span>&nbsp;{{item.address}}</span>
                  </div>
                  <hr class="hrWrapper">
                </div>
              </flexbox-item>
              <flexbox-item :span='2/5'>
                <div class="flex-demo imgWrapper">
                  <div style="height:90px; width:122px; overflow: hidden;" @click="clickImg(item.storeUrl.split(';'), 0)">
                    <img v-lazy="item.imgUrl" alt="" style="height:90px; width:122px;">
                  </div>
                </div>
              </flexbox-item>
            </flexbox>

            <div class="detailWrapper" @click="clickImg(item.storeUrl.split(';'), 0)">
              <span>查看美食详情，{{item.storeUrl.split(';').length}}张图片&nbsp;</span><i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
          </div>

          <div :style="{height: paddingBottom + 'px'}" style="width: 100%; background: none;"></div>

        </div>
      </scroll>
      <actionsheet v-model="showMap" :menus="menusMap" :show-cancel="showCancel" @on-click-menu="handleClickMenu"></actionsheet>

      <div class="alertWrapper">
        <div v-transfer-dom>
          <confirm v-model="showGaoDei"
            :title="titleMap"
            @on-cancel="onCancel"
            @on-confirm="onConfirmGaoDei">
            <p style="text-align:center;">您尚未安装常用地图，小嗨为您推荐安装高德地图</p>
          </confirm>
        </div>
      </div>

      <div v-transfer-dom>
        <previewer :list="selectAtlas" @imgLoaded="preImgLoaded" ref="previewer"></previewer>
      </div>
    </div>
  </transition>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import Slider from '@/components/slider/slider'
import Previewer from '@/components/previewer/previewer'
import axios from '@/api/axiosApi'
import { isIOS, isIphoneX } from '@/assets/js/brower'
import { Rater, Tab, TabItem, TransferDom, Popup, Grid, GridItem, Scroller, Divider, Flexbox, FlexboxItem, Actionsheet, Confirm } from 'vux'
import headerBg from '@/assets/img/cart_headerBg.png'
import notData from '@/components/not-data/not-data.vue'

export default {
  data () {
    return {
      contentHTML: '',
      showMap: false,
      menusMap: {},
      showGaoDei: false,
      titleMap: '操作提示',
      storeFoodList: [],
      selectAtlas: [],
      // 经度纬度
      latitude: '',
      longitude: '',
      address: '',
      showCancel: true,
      styles: {},
      data: [],
      headerBg,
      paddingBottom: 0
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader,
    Scroll,
    Rater,
    Tab,
    TabItem,
    Popup,
    Slider,
    Grid,
    GridItem,
    Scroller,
    Divider,
    Flexbox,
    FlexboxItem,
    Actionsheet,
    Confirm,
    Previewer,
    isIOS,
    isIphoneX,
    notData
  },
  mounted () {
    this.$refs.scroll.$el.style.height = (window.innerHeight - this.$refs.scroll.$el.offsetTop) + 'px'
  },
  created () {
    this.isMarginTop()
    this.pageNum = 1
    this.pageSize = 5
    this._getFoodCategory()
    this.getStoreFood(true)
  },
  methods: {

    isMarginTop () {
      if (isIphoneX()) {
        this.styles.marginTop = 80 + 'px'
        this.paddingBottom = 90
      } else {
        this.styles.marginTop = 70 + 'px'
        this.paddingBottom = 80
      }
    },
    back () {
      this.$router.go(-1)
    },
    _getFoodCategory () {
      axios.get(this, `/v1/foodCategory`, {
        id: this.$route.params.id
      }, (data) => {
        if (data && data.length > 0) {
          this._getDetail(data[0].contentId)
        }
      })
    },
    getStoreFood (isFirst) {
      axios.get(this, `/v1/storeFood`, {categoryId: this.$route.params.id, pageNum: this.pageNum, pageSize: this.pageSize}, (data) => {
        // console.log(data)
        data.forEach(item => {
          if (item.storeUrl.split(';').length > 0) {
            item.imgUrl = item.storeUrl.split(';')[0]
          }
        })
        if (isFirst) {
          this.storeFoodList = data
          return
        }
        if (data.length === 0) {
          this.$vux.toast.text('没有更多数据了', 'middle')
          if (this.$refs.scroll && this.pageNum > 0) {
            this.$refs.scroll.hiddenPullUpLoad()
          } else {
            this.$refs.scroll.hiddenPullDown()
          }
        } else {
          if (this.pageNum > 1) {
            this.storeFoodList = this.storeFoodList.concat(data)
          } else {
            this.storeFoodList = data
          }
        }
      })
    },
    onPullingUp () {
      this.pageNum++
      this.getStoreFood()
    },
    _getDetail (contentId) {
      axios.get(this, `/v1/contentDesc/${contentId}`, null, (data) => {
        if (data !== null || data !== '') {
          // this.$vux.toast.text('没有数据哇~', 'middle')
          this.contentHTML = data.contentHtml
        }
      })
    },
    goToMap (latitude, longitude, address) {
      if (latitude !== '' && longitude !== '') {
        if (isIOS()) {
          window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'openMapNavi', 'latitude': latitude, 'longitude': longitude})
        } else {
          // android
          this.menusMap = JSON.parse(window.android.isInstallByread())
          if (this.menusMap == null || Object.getOwnPropertyNames(this.menusMap).length === 1) {
            this.showCancel = false
            this.showGaoDei = true
            return
          }
          if (this.menusMap.baiDu === '2') {
            this.menusMap.baiDu = '百度地图'
          }
          if (this.menusMap.gaoDei === '1') {
            this.menusMap.gaoDei = '高德地图'
          }
          if (this.menusMap.tenXun === '3') {
            this.menusMap.tenXun = '腾讯地图'
          }
          this.showMap = true
          this.latitude = latitude
          this.longitude = longitude
          this.address = address
        }
      }
    },
    // 点击菜单跳转
    handleClickMenu (value) {
      if (value === 'baiDu') {
        window.android.makeUpMap(this.latitude, this.longitude, this.address, 2, 1, '')
      } else if (value === 'gaoDei') {
        window.android.makeUpMap(this.latitude, this.longitude, this.address, 1, 1, '')
      } else if (value === 'tenXun') {
        window.android.makeUpMap(this.latitude, this.longitude, this.address, 3, 1, '')
      }
    },
    // 确认弹框友好提示
    onCancel () {
    },
    onConfirmGaoDei () {
      window.android.makeUpMap(this.latitude, this.longitude, this.address, 0, 1, '')
    },
    clickImg (imgs, index) {
      // 预览图片
      this.$vux.loading.show({
        text: '加载中...',
        position: 'absolute'
      })
      let temp = []
      imgs.forEach((img, i) => {
        temp.push({
          src: img
        })
      })
      this.selectAtlas = temp
      this.$nextTick(() => {
        this.$refs.previewer.show(index)
      })
    },
    preImgLoaded () {
      this.$vux.loading.hide()
    },
    handleStoreDescribe (contentId) {
      if (typeof contentId !== 'undefined') {
        this.$router.push(`/storeDescribe/${contentId}`)
      }
    },
    getRefresh () {
      this.getStoreFood(true)
    }
  },
  watch: {
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'
  @import '~@/assets/css/mixins.styl'

  .food-describe {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background-color: $color-background;
    z-index: 101;
  }

.food {
    padding-top 5px
    background-color white
    padding-left 15px
    font-size $font-size-large
}

.foodAll {
    padding 10px 15px
    font-size $font-size-title
    background-color #fff
    color $color-text-2
    text-indent 20px
    line-height 2
}

.contentWrapper {
    background-color: white
    margin-left 2%
    margin-right 2%
    padding-top 2%
    padding-bottom 2%
    margin-top 10px
    box-shadow: 0px 0px 15px #C5C5C5;
    border-radius 5px
}

.imgWrapper {
    margin-right 15px
    margin-top 9px
}

.introduceWrapper {
    margin-left 15px
    line-height 30px
}

.introduceTitle {
    font-size $font-size-title
    margin-bottom 5px
}

.hrWrapper {
  height:1px;border:none;border-top:1px dashed #C5C5C5;
  margin-top 5px
}

.detailWrapper {
  margin-top 6px
  text-align right
  padding-right 10px
  font-size $font-size-desc
  color $color-theme
}

.introducePosition span {
    font-size $font-size-small
}

.introduce span {
    font-size $font-size-small
    no-wrap-n(3)
    padding-bottom 5px
}
</style>
